<template>
  <div class="full-page-2">
    <div class="full-page-2-vue" :class="{'enter': active, 'leave': !active}">
      <el-image :src="vue" class="w-28 h-28"></el-image>
      <a class="text-white font-bold text-3xl" href="https://cn.vuejs.org/" target="_blank">Vue.js | {{ $version }} </a>
    </div>
    <div class="full-page-2-card-container  flex-ajc" :class="{'enter':active, 'leave':!active}" @scroll.stop="callback">
      <div v-for="(item,index) in info" :key="index">
        <card-flow :info="item" :index="index"></card-flow>
      </div>
    </div>
    <el-image :src="bg" fit="cover" class="bg-image" lazy></el-image>
  </div>
</template>
<script setup name="fullPage2">
const { t } = useI18n();
const bg = useAssets('images/p2.jpg');
const vue = useAssets('images/png/vue-logo.png');

const info = [
  { title: t('page2.title.c1'), content: t('page2.content.c1'), href: t('page2.url.c1') },
  { title: t('page2.title.c2'), content: t('page2.content.c2'), href: t('page2.url.c2') },
  { title: t('page2.title.c3'), content: t('page2.content.c3'), href: t('page2.url.c3') },
  { title: t('page2.title.c4'), content: t('page2.content.c4'), href: t('page2.url.c4') }];

const props = defineProps({
  index: {
    type: Number,
    default: 0
  }
});
const active = computed(() => props.index === 1);

const callback = (e) => {
  e.preventDefault();
  e.returnValue = false;
};
</script>
<style lang="scss" scoped>
$n: 4;
.full-page-2{
  &-vue {
    @apply  w-full text-center my-12;
    &.enter { animation: slideInLeft 2s  ease-in-out; }
    &.leave { animation: slideOutRight .8s; }
  }
  &-card-container {
    @apply  w-full flex-wrap max-h-64 overflow-y-scroll lg:max-h-screen lg:overflow-visible;
    // 动画进入
    @for $i from 1 through $n {
      &.enter>div:nth-of-type(#{$i}){
        @if $i == 1 {
          animation: fadeInLeft 1.5s  ease-in-out;
        }
        @if $i == 2 {
          animation: fadeInUp 1.5s  ease-in-out;
        }
        @if $i == 3{
          animation: fadeInDown 1.5s ease-in-out;
        }
        @if $i == 4{
          animation: fadeInRight 1.5s ease-in-out;
        }
      }
    }
    // 动画离开
    @for $i from 1 through $n {
      &.leave>div:nth-of-type(#{$i}) {
        @if $i == 1 {
          animation:fadeOutBottomLeft 1s;
        }
        @if $i == 2 {
          animation:fadeOutDown 1s;
        }
        @if $i == 3{
          animation:fadeOutDown 1s;
        }
        @if $i == 4{
          animation:fadeOutBottomRight 1s;
        }
      }
    }
  }

}
</style>
